/**
 * 
 * 
 * 顶部导航栏下拉
 * 
 */
$(function () {
  $(".last-li").mouseover(function () {
    $(".menu1").stop().slideDown(200)
    $(".last-li").css("backgroundColor", "#fff");

  }).mouseout(function () {
    $(".menu1").stop().slideUp(200)
    $(".last-li").css("backgroundColor", "transparent")
  })

  // 我的聚美下拉
  $(".my-jumei").mouseover(function () {
    $(".menu2").stop().slideDown(200)
    $(".my-jumei").css("backgroundColor", "#fff");
    $(".my-jumei .arrow_a").css("display", "block")
  }).mouseout(function () {
    $(".menu2").stop().slideUp(200)
    $(".my-jumei").css("backgroundColor", "transparent");
    $(".my-jumei .arrow_a").css("display", "none")
  })

  // 我的聚美下拉
  $(".more").mouseover(function () {
    $(".menu3").stop().slideDown(200)
    $(".more").css("backgroundColor", "#fff");
    $(".more .arrow_a").css("display", "block")
  }).mouseout(function () {
    $(".menu3").stop().slideUp(200)
    $(".more").css("backgroundColor", "transparent");
    $(".more .arrow_a").css("display", "none")
  })

  // 海外自营
  $(".commodity-bottom .list-item1").mouseover(function () {

    $(".commodity-bottom .list-item1 .one")
      .stop().animate({
        top: -80
      })
    $(".commodity-bottom .list-item1 .two").stop().animate({
      top: -80
    })
  }).mouseout(function () {

    $(".commodity-bottom .list-item1 .one").stop().animate({
      top: -0
    })
    $(".commodity-bottom .list-item1 .two").stop().animate({
      top: -0
    })
  })

  $(".commodity-bottom .list-item2").mouseover(function () {

    $(".commodity-bottom .list-item2 .one")
      .stop().animate({
        top: -80
      })
    $(".commodity-bottom .list-item2 .two").stop().animate({
      top: -80
    })
  }).mouseout(function () {

    $(".commodity-bottom .list-item2 .one").stop().animate({
      top: -0
    })
    $(".commodity-bottom .list-item2 .two").stop().animate({
      top: -0
    })
  })

  $(".commodity-bottom .list-item3").mouseover(function () {

    $(".commodity-bottom .list-item3 .one")
      .stop().animate({
        top: -80
      })
    $(".commodity-bottom .list-item3 .two").stop().animate({
      top: -80
    })
  }).mouseout(function () {

    $(".commodity-bottom .list-item3 .one").stop().animate({
      top: -0
    })
    $(".commodity-bottom .list-item3 .two").stop().animate({
      top: -0
    })
  })

  $(".commodity-bottom .list-item4").mouseover(function () {

    $(".commodity-bottom .list-item4 .one")
      .stop().animate({
        top: -80
      })
    $(".commodity-bottom .list-item4 .two").stop().animate({
      top: -80
    })
  }).mouseout(function () {

    $(".commodity-bottom .list-item4 .one").stop().animate({
      top: -0
    })
    $(".commodity-bottom .list-item4 .two").stop().animate({
      top: -0
    })
  });

  // 顶部导航鼠标移入添加类名
  $(".nav-top-car ul li a").mouseover(function () {
    $(this).addClass("current3");
  })

  $(".nav-top-car ul li a").mouseout(function () {
    $(this).removeClass("current3");
  })

  $(".information-nav ul li a").mouseover(function () {
    $(this).addClass("current3");
  })

  $(".information-nav ul li a").mouseout(function () {
    $(this).removeClass("current3");
  })
  $(document).scroll(function () {
    console.log($(document).scrollTop())
    if ($(document).scrollTop() >= 800) {
      $(".nav-top-car").css("display", "block")
    }
    if ($(document).scrollTop() < 800) {
      $(".nav-top-car").css("display", "none")
    }
  })





  //获取需要的元素
  var obox = document.querySelector(".obox");
  //获取小图的div
  var small = obox.children[0];
  //遮挡层
  var mask = small.children[1];
  //获取大图的div
  var big = obox.children[1];
  //获取大图
  var bigImg = big.children[0];

  //鼠标进入显示遮挡层和大图的div
  obox.onmouseover = function () {
    mask.style.display = "block";
    big.style.display = "block";
  };
  //鼠标离开隐藏遮挡层和大图的div
  obox.onmouseout = function () {
    mask.style.display = "none";
    big.style.display = "none";
  };

  //鼠标的移动事件---鼠标是在小层上移动
  small.onmousemove = function (e) {
    //鼠标此时的可视区域的横坐标和纵坐标
    //主要是设置鼠标在遮挡层的中间显示
    var x = e.clientX - mask.offsetWidth / 2 - 100;
    var y = e.clientY - mask.offsetHeight / 2 - 90;
    //主要是margin的100px的问题
    x = x - 25;
    y = y - 25;
    //横坐标的最小值
    x = x < 0 ? 0 : x;
    //纵坐标的最小值
    y = y < 0 ? 0 : y;
    //横坐标的最大值
    x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
    //纵坐标的最大值
    y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;
    //为遮挡层的left和top赋值
    mask.style.left = x + "px";
    mask.style.top = y + "px";

    //遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
    //大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离

    //大图的横向的最大移动距离
    var maxX = bigImg.offsetWidth - big.offsetWidth;

    //大图的纵向的最大移动距离
    //var maxY = bigImg.offsetHeight - big.offsetHeight;

    //大图的横向移动的坐标
    var bigImgMoveX = x * maxX / (small.offsetWidth - mask.offsetWidth);
    //大图的纵向移动的坐标
    var bigImgMoveY = y * maxX / (small.offsetWidth - mask.offsetWidth);

    //设置图片移动
    bigImg.style.marginLeft = -bigImgMoveX + "px";
    bigImg.style.marginTop = -bigImgMoveY + "px";

  }



})